<template>
  <div id="xsqk" v-if="dataEnd">
    <el-radio-group v-model="checkList">
      <el-radio :label="1">表</el-radio>
      <el-radio :label="0">图</el-radio>
    </el-radio-group>

    <div v-if="show2018 && checkList">
      <h1>2018数据</h1>
      <el-table
        :data="res2018"
        style="width: 100%"
        show-summary
        :summary-method="getSum2018"
        :default-sort="{prop: 'arrivate_date'}"
        max-height="500"
        v-if="checkList"
      >
        <el-table-column
          label="日期"
          prop="arrivate_date"
          sortable
          :filters="month2018"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column label="单购门票">
          <el-table-column label="预报人数" prop="ybrs__sum[0]" sortable :sort-method="sortByYbrs0"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[0]" sortable :sort-method="sortByGpje0"></el-table-column>
        </el-table-column>
        <el-table-column label="单定住宿">
          <el-table-column label="预报人数" prop="ybrs__sum[1]" sortable :sort-method="sortByYbrs1"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[1]" sortable :sort-method="sortByGpje1"></el-table-column>
        </el-table-column>

        <el-table-column label="套餐">
          <el-table-column label="预报人数" prop="ybrs__sum[2]" sortable :sort-method="sortByYbrs2"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[2]" sortable :sort-method="sortByGpje2"></el-table-column>
        </el-table-column>

        <el-table-column label="合并">
          <el-table-column label="预报人数" prop="ybrs__sum[3]" sortable :sort-method="sortByYbrs3"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[3]" sortable :sort-method="sortByGpje3"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="show2019 && checkList">
      <h1>2019数据</h1>
      <el-table
        :data="res2019"
        style="width: 100%"
        show-summary
        :summary-method="getSum2019"
        :default-sort="{prop: 'arrivate_date'}"
        max-height="500"
      >
        <el-table-column
          label="日期"
          prop="arrivate_date"
          sortable
          :filters="month2019"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column label="单购门票">
          <el-table-column label="预报人数" prop="ybrs__sum[0]" sortable :sort-method="sortByYbrs0"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[0]" sortable :sort-method="sortByGpje0"></el-table-column>
        </el-table-column>
        <el-table-column label="单定住宿">
          <el-table-column label="预报人数" prop="ybrs__sum[1]" sortable :sort-method="sortByYbrs1"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[1]" sortable :sort-method="sortByGpje1"></el-table-column>
        </el-table-column>

        <el-table-column label="套餐">
          <el-table-column label="预报人数" prop="ybrs__sum[2]" sortable :sort-method="sortByYbrs2"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[2]" sortable :sort-method="sortByGpje2"></el-table-column>
        </el-table-column>
        <el-table-column label="合并">
          <el-table-column label="预报人数" prop="ybrs__sum[3]" sortable :sort-method="sortByYbrs3"></el-table-column>
          <el-table-column label="购票金额(万元)" prop="gpje__sum[3]" sortable :sort-method="sortByGpje3"></el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="!checkList" style="position: relative;">
<!--      <el-radio-group v-model="radio" class="tbxz">-->
<!--        <el-radio :label="'hb'">合计</el-radio>-->
<!--        <el-radio :label="'djmp'">单购门票</el-radio>-->
<!--        <el-radio :label="'ddzs'">单定住宿</el-radio>-->
<!--        <el-radio :label="'tc'">套餐</el-radio>-->
<!--      </el-radio-group>-->
      <Zxt
        :series="[...series(midData.result2018, '2018'),...series(midData.result2019, '2019')]"
        :xAxis1="xAxis1"
        :xAxis2="xAxis2"
        text="按购买人数"
      />

      <Zxt
        :series="[...series(midData.result2018, '2018', 'gpje__sum'),...series(midData.result2019, '2019', 'gpje__sum')]"
        :xAxis1="xAxis1"
        :xAxis2="xAxis2"
        text="按购票金额"
      />
    </div>
    <div v-if="!checkList" id="test"></div>
  </div>
</template>

<script>
import Zxt from "./zxt";

export default {
  name: "xsqk",
  data() {
    return {
      res2018: [],
      res2019: [],
      compare2018: [],
      compare2019: [],
      tj: [],
      show2018: false,
      show2019: false,
      compare: false,
      sxTohz: {
        djmp: "单购门票",
        tc: "套餐",
        ddzs: "单定住宿",
        hb: "合计"
      }, //缩写与汉字对照
      checkList: 1,
      dataEnd: false,
      radio: 'hb'
    };
  },
  components: {
    Zxt
  },
  props: ["midData", "value2018", "value2019"],
  computed: {
    month2018() {
      return this.value2018.map(item => {
        return {
          text: item + "月",
          value: item
        };
      });
    },
    month2019() {
      return this.value2019.map(item => {
        return {
          text: item + "月",
          value: item
        };
      });
    },
    sum2018() {
      const sums = [];
      for (let i = 0; i < 4; i++) {
        let a = this.res2018.reduce((a, b) => {
          return a + b.ybrs__sum[i];
        }, 0);
        let b = this.res2018.reduce((a, b) => {
          return a + b.gpje__sum[i];
        }, 0);
        sums.push(a);
        sums.push(parseFloat(b.toFixed(3)));
      }
      sums.unshift("合计");
      return sums;
    },
    sum2019() {
      const sums = [];
      for (let i = 0; i < 4; i++) {
        let a = this.res2019.reduce((a, b) => {
          return a + b.ybrs__sum[i];
        }, 0);
        let b = this.res2019.reduce((a, b) => {
          return a + b.gpje__sum[i];
        }, 0);
        sums.push(a);
        sums.push(parseFloat(b.toFixed(3)));
      }
      sums.unshift("合计");
      if (this.compare) {
        return sums.map((item, index) => {
          if (index === 0) return item;
          return (
            item +
            "-------" +
            "(" +
            "同比增长" +
            (
              ((item - this.sum2018[index]) * 100) /
              this.sum2018[index]
            ).toFixed(3) +
            "%" +
            ")"
          );
        });
      } else {
        return sums;
      }
    },
    xAxis1() {
      return this.res2018.map(item => item.arrivate_date);
    },
    xAxis2() {
      return this.res2019.map(item => item.arrivate_date);
    },
    series() {
      return function(mid, date, p = "ybrs__sum") {
        if(!mid) return [];
        const t = [];
        const lineStyle =
          date === "2018"
            ? {
                color: "#5793f3",
                width: 1,
                type: "dashed",
                opacity: "0.6"
              }
            : {
                color: "#d14a61",
                width: 1,
                type: "solid"
              };
       

        for(let v in mid){
            let a = {
                name: "",
                type: "line",
                data: [],
                lineStyle: lineStyle
            };
            a.name = this.sxTohz[v];
            if(date === '2019') a.xAxisIndex = 1;
            mid[v].forEach(i => {
            a.data.push(i[p]);
            });
            t.push(a);
            t.sort((a, b) => a[p] - b[p]);
        }
        return t;
      };
    },
    
  },
  mounted() {
    this.compare = this.midData.compare;
    if (this.midData.result2018) {
      this.show2018 = true;
      this.midData.result2018.hb.forEach((item, index) => {
        let djmp = this.midData.result2018.djmp[index];
        let ddzs = this.midData.result2018.ddzs[index];
        let tc = this.midData.result2018.tc[index];
        this.res2018.push({
          arrivate_date: item.arrivate_date,
          ybrs__sum: [
            djmp.ybrs__sum,
            ddzs.ybrs__sum,
            tc.ybrs__sum,
            item.ybrs__sum
          ],
          gpje__sum: [
            parseFloat(djmp.gpje__sum / 10000),
            parseFloat(ddzs.gpje__sum / 10000),
            parseFloat(tc.gpje__sum / 10000),
            parseFloat(item.gpje__sum / 10000)
          ]
        });
      });
      this.dataEnd = true;
    }
    if (this.midData.result2019) {
      this.show2019 = true;
      this.midData.result2019.hb.forEach((item, index) => {
        let djmp = this.midData.result2019.djmp[index];
        let ddzs = this.midData.result2019.ddzs[index];
        let tc = this.midData.result2019.tc[index];
        this.res2019.push({
          arrivate_date: item.arrivate_date,
          ybrs__sum: [
            djmp.ybrs__sum,
            ddzs.ybrs__sum,
            tc.ybrs__sum,
            item.ybrs__sum
          ],
          gpje__sum: [
            parseFloat((djmp.gpje__sum / 10000).toFixed(3)),
            parseFloat((ddzs.gpje__sum / 10000).toFixed(3)),
            parseFloat((tc.gpje__sum / 10000).toFixed(2)),
            parseFloat((item.gpje__sum / 10000).toFixed(2))
          ]
        });
      });
      this.dataEnd = true;
    }
  },
  methods: {
    getSum2018() {
      return this.sum2018;
    },
    getSum2019() {
      return this.sum2019;
    },
    sortByYbrs0(a, b) {
      return a.ybrs__sum[0] - b.ybrs__sum[0];
    },
    sortByYbrs1(a, b) {
      return a.ybrs__sum[1] - b.ybrs__sum[1];
    },
    sortByYbrs2(a, b) {
      return a.ybrs__sum[2] - b.ybrs__sum[2];
    },
    sortByYbrs3(a, b) {
      return a.ybrs__sum[3] - b.ybrs__sum[3];
    },
    sortByGpje0(a, b) {
      return a.gpje__sum[0] - b.gpje__sum[0];
    },
    sortByGpje1(a, b) {
      return a.gpje__sum[1] - b.gpje__sum[1];
    },
    sortByGpje2(a, b) {
      return a.gpje__sum[2] - b.gpje__sum[2];
    },
    sortByGpje3(a, b) {
      return a.gpje__sum[3] - b.gpje__sum[3];
    },
    monthData(data) {
      let res = {};
      let t = new Date();
      data.forEach(item => {
        let l = item.arrivate_date.split("-");
        t.setFullYear(l[0], l[1]);
        let m = t.getMonth().toString();
        if (m in res) {
          res[m].push(item);
        } else {
          res[m] = [item];
        }
      });
      return res;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      let l = row[property].split("-");
      let t = new Date();
      t.setFullYear(l[0], l[1]);
      let m = t.getMonth();
      return m === value;
    }
  }
};
</script>

<style>
#test {
  width: 800px;
  height: 400px;
}
.tbxz {
    position: fixed;
    left: 50px;
    top: 300px;
    z-index: 1000;
    display: flex!important;
    flex-direction: column;
    align-items: flex-start;
    height: 200px;    
    justify-content: space-around;
}
.tbxz label {
    display: inline-block;
}
</style>
